import React, { useEffect, useState } from 'react';
import './orderSubmit.css';
import { Link } from 'react-router-dom';
// 接收selectDate传过来的id
import { useNavigate, useLocation } from "react-router"
import * as api from 'api/index'
function OrderSubmit() {
  const location = useLocation('')
  const navigate = useNavigate('')
  console.log(4444, location);
  // console.log('id', location.state.id);
  // console.log('money', location.state.submit);
  // console.log('data', location.state.data);
  const first = location.state.data[0]
  const lg = location.state.data.length
  const end = location.state.data[lg - 1]

  // 联系人和电话
  let [phone, setPhone] = useState('')
  let [username, setUsername] = useState('')
  console.log(phone);
  console.log(username);
  let [list, setList] = useState({})
  const detailList = () => {
    let params = {
      id: location.state.id
    }
    api.houseDetail(params).then((res) => {
      setList(res.result)
      console.log(res);
    })
  }
  useEffect(detailList, [])

  // 传参到订单列表
  const ginseng = () => {
    {
      navigate("/order/pay",
        {
          state: {
            payMoney: location.state.submit,
            id: location.state.id,
            date: location.state.data,
            phone,
            username,
            totalMoney: location.state.submit.reduce(function (sum, item, index) {
              return sum * 1 + item * 1
            }, 0),
            realMoney: location.state.submit.reduce(function (sum, item, index) {
              return sum * 1 + item * 1
            }, 0),
            startDate: first,
            endDate: end

          }
        })
      // console.log('oooo', state);

    }
  }

  return (<div>
    <div className="orderSubmit">

      {/* <!-- 订单详情 --> */}
      <div className="dindanxiangqing  ">
        <img src={list.imageUrl}></img>

        <div className="dingdan-words ml-5">
          <span className="dindan-words-1">{list.name}</span>
          <span className="dindan-words-2">{list.description}</span>
          <span className="dindan-words-3">入住日期:{first}-{end}</span>
        </div>
      </div>
      {/* <!-- 个人信息 --> */}
      <div className="information">
        <div className="people ">
          <p className="people1 ">联系人</p>
          <input onChange={(even) => { setUsername(even.target.value) }} className="username" name="username" value={username} />
        </div>
        <div className="num">
          <p className="num1">手机号</p>
          <input onChange={(even) => { setPhone(even.target.value) }} className="phone" name="phone" value={phone} />
        </div>
        <div className="zhengque ">
          <p className="zhengque-words">* 请填写正确的手机号码，方便管家与您联系</p>
        </div>
      </div>


      {/* <!-- 金额 --> */}
      <div className="money">

        <div className="sum-money sum-money1 ">
          <p className="sum-money-word1">总金额</p>
          <p className="sum-money-num1">￥{location.state.submit.reduce(function (sum, item, index) {
            return sum * 1 + item * 1
          }, 0)}</p>
        </div>
        <div className="sum-money sum-money2 ">
          <p className="sum-money-word2">实际金额</p>
          <p className="sum-money-num2">￥{location.state.submit.reduce(function (sum, item, index) {
            return sum * 1 + item * 1
          }, 0)}</p>
        </div>
      </div>

      {/* <!-- 底部 --> */}
      <div className="buttom">

        <div onClick={ginseng} className="buttom-word">提交订单</div>
        {/* <div onClick={() => { navigate("/order/pay", { state: { payMoney: location.state.submit, id: location.state.id, date: location.state.data, phone, username, } }) }} className="buttom-word">提交订单</div> */}

      </div>
    </div>
  </div >);
}

export default OrderSubmit;